<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" type="text/css" href="img/dog-1.jpg"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 需求：pc端一行放四张图片/平板一行放两张图片，手机放一张图片 -->
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="w-100">
				</div>
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="w-100" >
				</div>
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg" class="w-100">
				</div>
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="w-100" >
				</div>
			</div>
			<hr >
			<h3>需求：pc端一行放四张图片/平板一行放两张图片，手机放一张图片</h3>
			<div class="row">
				<!-- 需求：pc端一行放四张图片/平板一行放两张图片，手机放一张图片 -->
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="img-fluid">
				</div>
				
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="img-fluid" >
				</div>
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg" class="img-fluid">
				</div>
				<div class="col-12 col-md-3 col-sm-6 ">
					<img src="img/dog-1.jpg"  class="img-fluid" >
				</div>
			</div>
			<hr >
			<div class="row">
				<div class="col-12 col-sm-6 col-md-3">
					<img src="img/dog-1.jpg" class="img-thumbnail" >
					<!-- thumbnail climb -->
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="img/dog-1.jpg" class="img-thumbnail" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="img/dog-1.jpg" class="img-thumbnail" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="img/dog-1.jpg" class="img-thumbnail" >
				</div>
			</div>
			<hr >
			<div class="container clearfix">
					<h3>使用浮动实现图片对齐</h3>
					<img src="img/dog-1.jpg" title="第一张图片" class="float-right">
					<img src="img/dog-1.jpg" title="第二张图片" class="float-left">
			</div>
			<div class="container border text-center">
					<img src="img/dog-1.jpg" title="第三张图片" >
			</div>
			<div class="container">
					<img src="img/dog-1.jpg" title="第四张图片"  class="mx-auto d-block">
			</div>
		</div>
		<div style="width: 300px;background-color: red;height: 300px;">hello</div>
	</body>
</html>
